import { createBrowserRouter } from 'react-router-dom'
import { lazy } from 'react'
const Layout = lazy(() => import('../pages/layout'))
const Login = lazy(() => import('../pages/login'))
const Socket = lazy(() => import('../pages/socket'))
const Order = lazy(() => import('../pages/order'))
const Home = lazy(() => import('../pages/home'))
const OrderList = lazy(() => import('../pages/orderList'))
const routerAll = {
    home: {
        path: '/index/home',
        element: <Home />,
        title: '主页'
    },
    order: {
        path: '/index/order',
        element: <Order />,
        title: '商品',
        children: [
            {
                path: '/index/order/orderList',
                element: <OrderList />,
                title: '商品分类'
            }
        ]
    },
    socket: {
        path: '/index/socket',
        element: <Socket />,
        title: '聊天'
    },
}

const roles = {
    admin: {
        routerPage: ['home', 'order', 'socket'],
        btns: {
            order: ['add', 'edit', 'del']
        }
    },
    user: {
        routerPage: ['order'],
        btns: {
            order: ['add', 'edit']
        }
    }
}

const username = localStorage.getItem('username') || 'admin'
const { routerPage, btns } = roles[username]
export const router = routerPage.map((item) => {
    return {
        ...routerAll[item],
        loader: () => {
            return btns[item]
        }
    }
})

const routers = createBrowserRouter([
    {
        path: '/index',
        element: <Layout />,
        children: router
    },
    {
        path: '/login',
        element: <Login />,
    },
])

export default routers